import axios from "axios";

import { Toast } from "antd-mobile";



// 设置基础路径
export const BaseURL = "http://157.122.54.189:9060";

// 给axios 设置
axios.defaults.baseURL = BaseURL;


// 同时发送请求的 个数
let ajaxNums=0;

// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  Toast.loading('加载中...', 0);
  ajaxNums++;
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么

  ajaxNums--;
  if(ajaxNums===0){
    // 三个请求都回来了 => 最后一个请求回来
    // console.log("最后一个请求回来");
    Toast.hide();
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default axios;


/* 

1  在首页的同时发送了3个请求出去 
2  请求拦截器 会被调用三次
   等待中图片 Toast.loading 被调用三次 
3  第一个请求回来 花 1s 
    触发 响应拦截器 => 关闭了 “等待中” 图标
4  后两个请求 花了，10s 请求才回来  没有了等待中的效果  体验就不好 
5 解决：
   最后一个请求回来了  才关闭 等待中  效果 
   1 定义一个全局变量 计数器 
   2 在请求拦截器被调用的时候 计数器++
   3 在响应拦截器被调用的时候 计数器--
      if 计数器 = 0  就表示最后一个请求回来了！！ 



*/